<template>
  <div class="table-wrapper">
    <ag-grid-vue
      class="ag-theme-alpine"
      style="width: 100%; height: 500px;"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :defaultColDef="defaultColDef"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { columnDefs } from './columnDefs'; // 引入 columnDefs
export default {
  components: {
      AgGridVue
    },
  data() {
    return {
      msg: 'hello world',
      columnDefs: columnDefs,
      rowData: [
        { name: 'John Doe', age: 25 },
        { name: 'Jane Smith', age: 30 }
      ],
      defaultColDef: {
        sortable: true,
        filter: true
      }
    };
  }
}
</script>

<style lang="less" scoped>
.table-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .filter-wrapper {
    width: 230px;
    .label {
      min-width: 80px;
    }
    .select-width {
      width: 150px;
    }
  }
}
/* 添加悬停时显示中文提示的样式 */
.ag-header-cell-label i[title] {
  position: relative;
}

.ag-header-cell-label i[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 10;
}
</style>